<template>
    <div class="container">
        <div class="search-bar">
            <el-input v-model="searchKeyword" placeholder="请输入检索内容"></el-input>
            <el-button type="primary" @click="triggerSearch">搜索</el-button>
            <el-button @click="resetSearch">刷新</el-button>
            <el-button type="primary" @click="confirmPosition">确认</el-button>
        </div>   
        <baidu-map class="bm-view" :zoom="12" :center="center" :scroll-wheel-zoom="true"
            :minZoom="5"
            :maxZoom="20"
            :wheelZoomDelta="0.1"
            :animationDuration="300" 
            @click="handleMapClick"
            @ready="handleMapReady"
            >
            <!-- 点击地图时触发 handleMapClick 方法，可用于获取点击位置 -->
            <!-- 地图加载完成后触发 handleMapReady 方法，可用于初始化地图相关操作 -->

            <!-- 地图比例尺组件，定位在地图右上角 -->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!-- 地图导航控件组件，定位在地图右上角，填充不透明度为 1 -->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" fillOpacity="1"></bm-navigation>
             <!-- 地图标记组件，v-if 指令控制是否显示标记 -->
            <!-- 只有当 marker 变量有值时才显示标记 -->
            <!-- position 属性指定标记的位置，由 marker 变量控制 -->
            <!-- dragging 属性允许标记可拖动 -->
            <!-- 标记拖动结束时触发 updateMarker 方法，可用于更新标记位置 -->
            <bm-marker v-if="marker" :position="marker" :dragging="true" @dragend="updateMarker"></bm-marker>
        </baidu-map>
    </div>
</template>

<script setup>import { ref, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';

//定义组件接受的外部属性
const props = defineProps({
  //定义对象类属性
  initialPosition: {
    type: Object,
    required: true
  }
});

//用户确认选择的位置时触发
const emit = defineEmits(['confirm']);

const center = ref({ lng: props.initialPosition.lng, lat: props.initialPosition.lat });
const marker = ref(null);
const searchKeyword = ref('');
let localSearch = null;
let map = null;

// 地图加载完成后获取地图实例
//BMap百度地图API对象   map地图实例
const handleMapReady = ({ BMap, map: bmap }) => {
  map = bmap;
  console.log('地图实例已初始化1', map);
  //创建百度地图本地搜索实例，搜索完成后回调onSearchComplete
  localSearch = new BMap.LocalSearch(map, {
    onSearchComplete: function(results) {
      console.log('搜索结果:', results); // 添加调试信息


      
      if (localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
        console.log('搜索结果22:', results.ok);
        const nk = results.ok;
        

        console.log('搜索结果11:', nk);
        if (nk && nk.length > 0) {
          const firstPoi = nk[0];
          center.value = { lng: firstPoi.point.lng, lat: firstPoi.point.lat };
          marker.value = { lng: firstPoi.point.lng, lat: firstPoi.point.lat };
        } else {
          ElMessage.warning('未找到相关位置');
        }
      } else {
        ElMessage.warning('搜索失败，请重试');
      }
    }
  });
};

// 点击地图获取坐标点，更新marker
const handleMapClick = (e) => {
  const point = e.point;
  marker.value = { lng: point.lng, lat: point.lat };
};

// 标记拖动结束时，更新marker
const updateMarker = (e) => {
  marker.value = { lng: e.point.lng, lat: e.point.lat };
};

// 点击确认后逻辑
const confirmPosition = () => {
  if (!marker.value) {
    ElMessage.warning('请选择一个位置');
    return;
  }
  //标记点的位置作为参数传递出去
  emit('confirm', marker.value);
};

// 点击搜索后，触发搜索方法
const triggerSearch = () => {
  if (searchKeyword.value) {
    //调用 localSearch 的 search 方法进行搜索
    localSearch.search(searchKeyword.value);
    console.log('搜索关键字：', searchKeyword.value);
  } else {
    ElMessage.warning('请输入检索内容');
  }
};

// 重置方法
const resetSearch = () => {
  console.log('重置搜索关键字');
  searchKeyword.value = '';
  console.log('重置地图中心');
  center.value = { lng: props.initialPosition.lng, lat: props.initialPosition.lat };
  marker.value = { lng: props.initialPosition.lng, lat: props.initialPosition.lat }; // 重置 marker 为初始位置
  if (map) {
    map.setCenter({ lng: props.initialPosition.lng, lat: props.initialPosition.lat });
  }
  console.log('重置地图中心完成');
};

// 初始化地图
const resetMap = (newPosition) => {
  console.log('重新初始化地图:', newPosition);
  center.value = { lng: newPosition.lng, lat: newPosition.lat };
  marker.value = { lng: newPosition.lng, lat: newPosition.lat };
};

onMounted(() => {
  marker.value = center.value;
});
</script>





<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* overflow: hidden; */
  position: relative;
  /* box-sizing: border-box; */
}

.bm-view {
  flex: 1;
  width: 100%;
  height: calc(100% - 100px);
  /* overflow: hidden; */
  position: relative;
  box-sizing: border-box;
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  position: relative;
  box-sizing: border-box;
}

.search-bar .el-input {
  width: 300px;
  margin-right: 10px;
}
</style>







